﻿<template>
  <div>
    <el-dialog
      :title="$t('email.mangeAccount')"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      @open="getInit"
      height="700"
      :before-close="handleClose"
      custom-class="min-w-190"
      style="padding-top: unset"
    >
      <div ref="filter" class="filter-container" style="margin-bottom: unset">
        <template>
          <el-input
            v-model="listQuery.emailAddress"
            size="mini"
            :placeholder="$t('common.enter', [$t('common.email')])"
            style="width: 200px"
            class="filter-item filter-left"
            clearable
          />
          <el-select
            v-model="listQuery.groupId"
            class="filter-item filter-left"
            :placeholder="$t('common.select', [$t('common.grouping')])"
            filterable
            size="mini"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            size="mini"
            class="filter-item filter-left"
            icon="el-icon-search"
            type="primary"
            style="margin-left: 5px"
            plain
            @click="search()"
          >
            {{ $t('common.search') }}
          </el-button>
          <el-button
            size="mini"
            class="filter-item filter-left"
            type="success"
            style="margin-left: 5px"
            plain
            @click="handleChangeGroup"
            >{{ $t('email.batchGroup') }}</el-button
          >
          <el-button
            size="mini"
            class="filter-item filter-left"
            type="danger"
            style="margin-left: 5px"
            plain
            @click="batchDelete"
            :disabled="selection.length <= 0"
            >{{ $t('email.batchDelete') }}</el-button
          >

          <el-button
            size="mini"
            class="filter-item right filter-left filter-refresh"
            icon="el-icon-refresh"
            type="primary"
            plain
            @click="refresh()"
          />
        </template>
      </div>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        @selection-change="handleSelection"
        border
      >
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column
          align="center"
          prop="emailAddress"
          :label="$t('email.emailAccount')"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('common.grouping')"
          min-width="100px"
        >
          <template slot-scope="scope">
            {{ groupMap[scope.row.emailConfigGroupId] || '' }}
          </template>
        </el-table-column>
        <!-- <el-table-column
              align="center"
              label="状态">
              待验证
          </el-table-column> -->
        <el-table-column
          align="center"
          prop="createdAt"
          :label="$t('common.createTime')"
          min-width="150px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('common.actions')"
          min-width="180px"
        >
          <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button type="text" size="small" @click="edit(scope.row)">{{
              $t('common.edit')
            }}</el-button>
            <el-button
              type="text"
              size="small"
              @click="changeGroup(scope.row.id)"
              disabled
              >{{ $t('email.revalidate') }}</el-button
            >
            <el-button
              type="danger"
              size="mini"
              plain
              @click="deleteRow(scope.row)"
              >{{ $t('common.delete') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 50px">
        <change-group
          :show.sync="showChangeGroupVisible"
          @closeAction="refresh"
          :id="changeGroupIds"
        />
        <pagination
          v-show="listQuery.total > 0"
          :total="listQuery.total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList()"
        />
      </div>
    </el-dialog>
    <!-- <change-group :id="collectId" :show.sync="showDealState" @closeAction="refresh"/> -->
    <edit-account :show.sync="showEditAccount" :id="id" />
  </div>
</template>

<script>
import {
  getAction,
  postAction,
  getUrlAction,
  postUrlAction,
} from '@/api/common'
import ChangeGroup from './changeGroup.vue'
import Pagination from '@/components/Pagination/index.vue'
import EditAccount from '@/views/email/emailSendFree/editAccount'
import { deleteCustomer } from '@/api/customer'

export default {
  name: 'ManageAccount',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    EditAccount,
    ChangeGroup,
    Pagination,
  },
  inject: ['showProgressDialog'],
  created() {
    this.getList()
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    },
  },
  data: function () {
    return {
      /// /////////////////////////////////////////////////////////////////////////////////
      listQuery: {
        total: 0,
        page: 0,
        limit: 10,
        emailAddress: undefined,
        groupId: undefined,
      },
      options: [],
      tableData: [],
      selection: [],
      changeGroupIds: [],
      dialogVisible: this.show,
      listLoading: false,
      /// /////////////////////////////////////////////////////////////////////////////////
      emailGroupOptions: [],
      showChangeGroupVisible: false,
      showEditAccount: false,
      id: 0,
    }
  },
  computed: {
    groupMap() {
      const map = {}
      for (let item of this.options) {
        map[item.value] = item.label
      }
      return map
    },
  },
  methods: {
    search() {
      this.getList()
    },
    refresh() {
      this.listQuery = {
        total: 0,
        page: 0,
        limit: 10,
        emailAddress: undefined,
        groupId: undefined,
      }
      this.getInit()
    },
    /// /////////////////////////////////////////////////////////////////////////////////
    handleChangeGroup() {
      if (this.selection.length <= 0) {
        this.$message({
          type: 'info',
          message: this.$t('email.checkEmailsNeedToBatchGroup'),
        })
        return false
      }
      const ids = this.selection.map((m) => m.id)
      console.log(ids)
      this.changeGroupIds = ids
      this.showChangeGroupVisible = true
    },
    handleSelection(val) {
      this.selection = val
    },
    /// /////////////////////////////////////////////////////////////////////////////////
    handleClick(row) {
      console.log(row)
    },
    getInit() {
      this.listLoading = true
      this.getGroupOptions()
      this.getList()
      this.listLoading = false
    },
    getList() {
      getAction(this.listQuery, 'EmailConfig/GetEmailAccountList').then(
        (res) => {
          console.log(res)
          this.tableData = res.data.items
          this.listQuery.total = res.data.total
        }
      )
    },
    getGroupOptions() {
      getAction({}, 'EmailConfigGroup/GetGroupList').then((res) => {
        this.options = res.data
        this.options.push({ label: this.$t('email.noGroup'), value: 0 })
      })
    },
    handleClose() {
      this.$emit('update:show', false)
    },
    edit(row) {
      this.showEditAccount = true
      this.id = row.id
    },
    changeGroup(id) {
      this.showChangeGroupVisible = true
      console.log('changeGroup')
    },
    deleteRow(row) {
      this.$confirm(this.$t('email.confirmDeleteEmail', [row.emailAddress]))
        .then(() => {
          this.deleteEmailConfig(row.id).then(() => {
            this.$message.success(this.$t('common.deleteSuccessfully'))
            this.refresh()
          })
        })
        .catch(() => {})
    },
    deleteEmailConfig(id) {
      return postAction({}, `EmailConfig/Delete/${id}`)
    },
    batchDelete() {
      if (this.selection.length <= 0) {
        this.$message(this.$t('customer.checkDataNeedToBatchDelete'))
        return false
      }
      const uploadItems = [
        {
          name: this.$t('email.senderAccount'),
          num: this.selection.length,
          action: this.batchDeleteFunc,
          data: this.selection,
        },
      ]
      const uploadColumns = [
        { label: this.$t('email.senderAccount'), key: 'emailAddress' },
      ]
      this.showProgressDialog(uploadItems, uploadColumns, this.refresh, {
        title: this.$t('common.batchDeleteCantReverse'),
      })
    },
    batchDeleteFunc({ item, message }) {
      this.deleteEmailConfig(item.id)
        .then((res) => {
          message.success('[' + item.emailAddress + '] 删除成功')
        })
        .catch((res) => {
          message.failed('[' + item.emailAddress + '] ' + res.message)
        })
    },
  },
}
</script>
